<template>
  <a-modal
    :visible="visible"
    :title="'商品详情'"
    :footer="false"
    @cancel="$emit('update:visible', false)"
    @visible-change="handleVisibleChange"
    :mask-closable="true"
    modal-class="goods-detail-modal"
    :width="700"
  >
    <div class="goods-detail-container" v-if="goods">
      <!-- 顶部信息区域 -->
      <div class="goods-detail-header">
        <div class="avatar-container">
          <a-avatar :size="80" :style="{ backgroundColor: goods.status ? '#00b42a' : '#f53f3f' }">
            {{ goods.name ? goods.name.substring(0, 1) : 'G' }}
          </a-avatar>
          <div class="status-badge" :class="{ active: goods.status }">
            {{ goods.status ? '已上架' : '已下架' }}
          </div>
        </div>
        <div class="basic-info">
          <h2>{{ goods.name || '未设置商品名称' }}</h2>
          <div class="info-item">
            <icon-tag />
            商品ID: {{ goods.id }}
          </div>
          <div class="info-item">
            <icon-scan />
            {{ goods.goodsNo || '未设置编号' }}
          </div>
          <div class="info-item">
            <icon-dollar />
            ¥{{ goods.sellPrice || 0 }}
          </div>
        </div>
        <div class="action-buttons">
          <a-button type="outline" status="success" @click="$emit('edit', goods)">
            <template #icon>
              <icon-edit />
            </template>
            编辑
          </a-button>
          <a-button
            type="outline"
            :status="goods.status ? 'danger' : 'success'"
            @click="$emit('toggleStatus', goods)"
            style="margin-left: 8px"
          >
            <template #icon>
              <icon-poweroff v-if="goods.status" />
              <icon-play-arrow v-else />
            </template>
            {{ goods.status ? '下架' : '上架' }}
          </a-button>
        </div>
      </div>

      <!-- 详细信息区域 -->
      <a-divider />

      <div class="detail-section">
        <div class="detail-row">
          <div class="detail-item">
            <div class="detail-label">商品ID</div>
            <div class="detail-value">{{ goods.id }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">商品编号</div>
            <div class="detail-value">{{ goods.goodsNo || '未设置' }}</div>
          </div>
        </div>

        <div class="detail-row">
          <div class="detail-item">
            <div class="detail-label">销售价</div>
            <div class="detail-value">¥{{ goods.sellPrice || 0 }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">库存</div>
            <div class="detail-value">{{ goods.storeNums || 0 }}</div>
          </div>
        </div>

        <div class="detail-row">
          <div class="detail-item">
            <div class="detail-label">创建时间</div>
            <div class="detail-value">{{ goods.createdTime || '未知' }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">更新时间</div>
            <div class="detail-value">{{ goods.updatedTime || '未知' }}</div>
          </div>
        </div>

        <div class="detail-row">
          <div class="detail-item full-width">
            <div class="detail-label">商品描述</div>
            <div class="detail-value">{{ goods.description || '未设置' }}</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { GoodsDetail } from '@/api/goods'
import { 
  IconEdit, 
  IconPoweroff, 
  IconPlayArrow, 
  IconTag,
  IconScan,
  IconMoneyCollect 
} from '@arco-design/web-vue/es/icon'

// 定义组件属性
const props = defineProps<{
  visible: boolean
  goods: GoodsDetail | null
}>()

// 定义组件事件
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'edit', goods: GoodsDetail): void
  (e: 'toggleStatus', goods: GoodsDetail): void
}>()

// 处理对话框可见性变化
const handleVisibleChange = (val: boolean) => {
  emit('update:visible', val)
}
</script>

<style scoped lang="less">
@import '../styles/common.less';

:deep(.member-detail-modal) {
  .arco-modal-header {
    border-bottom: 1px solid #f2f3f5;
    padding-bottom: 12px;
  }

  .arco-tabs-header {
    margin-bottom: 0;
  }
}

.member-detail-container {
  .member-detail-header {
    display: flex;
    align-items: center;
    padding-bottom: 16px;

    .avatar-container {
      position: relative;
      margin-right: 20px;

      .status-badge {
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        padding: 2px 12px;
        border-radius: 10px;
        font-size: 12px;
        background-color: #f53f3f;
        color: white;
        white-space: nowrap;
        min-width: 60px;
        text-align: center;

        &.active {
          background-color: #00b42a;
        }
      }
    }

    .basic-info {
      flex: 1;

      h2 {
        margin: 0 0 8px 0;
        font-size: 18px;
        color: #1d2129;
      }

      .info-item {
        margin-bottom: 6px;
        color: #4e5969;
        font-size: 14px;
        display: flex;
        align-items: center;

        .arco-icon {
          margin-right: 6px;
          font-size: 16px;
        }
      }
    }

    .action-buttons {
      margin-left: 20px;
    }
  }
}
</style>